<template>
  <div>
    <!-- <p>刷新次数: {{ count }}</p> -->
    <!-- 头部图片 -->
    <div
      style="
        width: 100%;
        background-image: url(assets/tab1_header.png);
        margin-top: 0px;
        height: 60px;
        display: flex;
        justify-content: center;
      "
    >
      <span style="margin-top: 30px; color: white">报表</span>
    </div>
    <!-- 图片结束 -->

    <!-- 菜单 -->
    <div class="textScroll">
      <Row class="menu-col">
        <div v-for="parent in list" :key="parent.id">
          <NoticeBar
            color="#224C64"
            background="#F2F4F7"
            style="height: 8px"
            :left-icon="parent.icon"
          ></NoticeBar>
          <div v-if="parent.children">
            <div>
              <van-row style="margin-top: 5px">
                <van-col>
                  <van-image width="20" height="20" src="assets/block.png" />
                </van-col>
                <van-col style="color: #224c64">{{ parent.menuName }}</van-col>
              </van-row>
            </div>
            <Col span="8" v-for="child in parent.children" :key="child.id">
              <Icon
                :name="child.icon"
                size="2rem"
                @click="open(child.path, child.perms, child.menuName)"
              />
              <span @click="open(child.path, child.perms, child.menuName)">{{
                child.menuName
              }}</span>
            </Col>
          </div>
        </div>
      </Row>
    </div>
    <!-- 菜单结束 -->

    <ActionSheet
      v-model="actionSheetShow"
      :actions="actions"
      description="请选择任务类型"
      close-on-click-action
      @select="onSelect"
    />
    <!-- <a @click="getUser">dasdasdas</a> -->
  </div>
</template>

<script>
import {
  Search,
  Toast,
  Icon,
  Row,
  Col,
  NoticeBar,
  ActionSheet,
  Image as VanImage,
  Dialog,
  PullRefresh,
  Grid,
  GridItem,
} from "vant";
Vue.use(Col);
Vue.use(Row);
Vue.use(VanImage);
Vue.use(Dialog);
Vue.use(PullRefresh);
Vue.use(Icon);
Vue.use(Grid);
Vue.use(GridItem);
import apicloud from "@/libs/apicloud";
import { _httpClient } from "@/libs/api";
import { storage, memory } from "@/libs/utils";
import { getToken } from "@/libs/auth";
export default {
  name: "tab1",
  components: { Search, Icon, Col, Row, Toast, NoticeBar, ActionSheet },
  data() {
    return {
      count: 0,
      isLoading: false,
      user: [], //用户信息
      actionSheetShow: false,
      actions: [
        { id: "0", name: "停机任务" },
        { id: "1", name: "运行任务" },
      ],
      equipmentInfo: [], //设备信息
      list: [
        {
          menuName: "报表",
          path: "",
          parentId: 1,
          menuType: "M",
          perms: "task_execute",
          icon: "",
          children: [
            {
              menuName: "未完成任务",
              path: "report-taskNoFinish",
              menuType: "C",
              icon: "assets/noFinishTask.png",
              perms: "0",
              children: [],
            },
            {
              menuName: "已完成任务",
              path: "report-taskFinish",
              menuType: "C",
              perms: "1",
              icon: "assets/finishedTask.png",
              children: [],
            },
            {
              menuName: "报修响应",
              path: "report-repairReport",
              menuType: "C",
              icon: "assets/repairReport.png",
              perms: "0",
              children: [],
            },
            {
              menuName: "呼叫响应",
              path: "report-callResponse",
              menuType: "C",
              icon: "assets/callReport.png",
              perms: "0",
              children: [],
            },
            {
              menuName: "维修工时日报表",
              path: "report-repairDayTime",
              menuType: "C",
              icon: "assets/dayReport.png",
              perms: "0",
              children: [],
            },
            {
              menuName: "维修工时月报表",
              path: "report-repairMonthTime",
              menuType: "C",
              icon: "assets/monthReport.png",
              perms: "0",
              children: [],
            },
            {
              menuName: "总维修时间月汇总",
              path: "report-repairTotalTime",
              menuType: "C",
              icon: "assets/totalReport.png",
              perms: "0",
              children: [],
            },
            {
              menuName: "故障分类报表",
              path: "report-repairFaultType",
              menuType: "C",
              icon: "assets/faultReport.png",
              perms: "0",
              children: [],
            },
            {
              menuName: "安全点检月报",
              path: "report-securityCollect",
              menuType: "C",
              icon: "assets/securityReport.png",
              perms: "0",
              children: [],
            },
            {
              menuName: "被动抽查报表",
              path: "report-passivityReport",
              menuType: "C",
              icon: "assets/passivity.png",
              perms: "0",
              children: [],
            },
            {
              menuName: "主动抽查报表",
              path: "report-initiativeReport",
              menuType: "C",
              icon: "assets/extract.png",
              perms: "0",
              children: [],
            },
            {
              menuName: "用工差异报表",
              path: "report-differenceemployment",
              menuType: "C",
              icon: "assets/manhourreport.png",
              perms: "0",
              children: [],
            },
          ],
        },
      ],
      queryParams: {
        mnType: "",
        eqStatus: "",
        taskType: "",
      },
      menuRoute: "",
      loading: false,
      finished: false,
    };
  },
  created() {
    let taht = this;
    // setTimeout(function() {
    //   if (storage.get('user') != '' && storage.get('user') != undefined) {
    //     taht.user = JSON.parse(storage.get('user'))
    //   }
    // }, 300)
  },

  mounted() {
    //监听登录事件
    let that = this;

    this.$ac.addEventListener({ name: "loginSuccess" }, function (ret) {
      that.initUser();
    });
  },
  methods: {
    async initUser() {
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/getAppRouters"
        );
        if (res.code === 200) {
          //用户信息
          storage.set("user", res.user);
          this.user = JSON.parse(storage.get("user"));
        }
        Toast.clear();
      } catch (e) {
        Toast.fail(e);
      }
    },
    getUser() {
      let user = JSON.parse(storage.get("user"));
    },

    //界面跳转
    jumpOther(route, urlValue) {
      api.openWin({
        name: route,
        url: urlValue,
        rect: {
          x: 0,
          y: 150,
          w: api.winWidth,
          h: api.winHeight,
        },
      });
    },

    /**
     * 打开Win
     * @param route 跳转路由
     * @param alias  路由标题
     */
    async open(route, alias, menuName) {
      if (this.user.userName != "QISAdministrator") {
        //验证当前用户是否有访问权限
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() +
            "/system/menu/applist?menuName=" +
            menuName +
            "&userId=" +
            this.user.userId
        );

        if (res.code === 200 && res.data.length == 0) {
          Dialog.alert({
                          theme: 'round-button',
            title: "提示",
            message: "您没有当前菜单权限，请联系管理员！",
          }).then(() => {
            // on close
          });
          return;
        }
      }
      if (alias == "task_execute") {
        this.actionSheetShow = true;
        this.queryParams.mnType = alias;
        this.menuRoute = route;
        if (menuName == "日任务") {
          this.queryParams.taskType = "0";
        } else if (menuName == "周任务") {
          this.queryParams.taskType = "1";
        } else if (menuName == "月任务") {
          this.queryParams.taskType = "2";
        } else if (menuName == "工艺点检") {
          this.queryParams.taskType = "3";
        }
        return;
      }
      if (alias == "" || alias == null || alias == undefined) {
        alias = "alias";
      }
      this.$ac.openWin({
        name: alias,
        url: "./" + route + ".html",
        type: "fade",
        pageParam: {},
      });
    },
    openwithDialog(route, alias) {
      this.actionSheetShow = true;
      this.queryParams.mnType = alias;
      this.menuRoute = route;
    },
    onSelect(item) {
      this.queryParams.eqStatus = item.id;
      if (this.menuRoute) {
        this.$ac.openWin({
          name: "pointTaskList",
          url: "./maintain-spotCheck-pointTaskList.html", // sub diretory file format: ./[subdir]-[subdir]-[filename].html
          pageParam: this.queryParams,
        });
      }
    },
  },
  destroyed() {
    this.$ac.removeEventListener({
      name: "loginSuccess",
    });
  },
};
</script>

<style scoped>
.menu-col .van-col {
  display: inline-block;
  float: none;
  color: blue;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

.menu-col .van-icon {
  margin: 12px 0 6px;
  font-size: 3rem;
}

.van-icon {
  position: relative;
  display: inline-block;
  font: normal normal normal 14px/1 "vant-icon";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.menu-col .van-col span {
  display: block;
  height: 36px;
  margin: -4px 0 4px;
  padding: 0 5px;
  color: #646566;
  font-size: 12px;
  line-height: 18px;
}
.textScroll {
  display: inline-block;
  position: fixed;
  top: 4rem;
  bottom: 0rem;
  overflow: scroll;
  right: 0;
  width: 100%;
  z-index: 1;
}
</style>
